<template>
  <view class="image-swiper-container">
    <scroll-view 
      class="image-scroll-view" 
      scroll-x 
    >
      <view class="image-wrapper">
        <image 
          v-for="(item, index) in images" 
          :key="index"
          class="scroll-image"
          :src="item.src || item"
          mode="heightFix"
          :style="{height: imgHeight + 'rpx'}"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    // 图片数组，可以是字符串数组或对象数组（包含src属性）
    images: {
      type: Array,
      default: () => []
    },
    // 图片高度
    imgHeight: {
      type: [Number, String],
      default: 200
    }
  },
  data() {
    return {
      scrollLeft: 0,
      imageWidths: [] // 存储每张图片的实际宽度
    }
  },
  methods: {
    onImageLoad(e, index) {
      // 获取图片实际尺寸
      const { width, height } = e.detail
      // 计算等比例缩放后的宽度
      const scaledWidth = (width / height) * this.imgHeight
      this.$set(this.imageWidths, index, scaledWidth)
    },
    handleScroll(e) {
      this.scrollLeft = e.detail.scrollLeft
    },
    previewImage(index) {
      // 图片预览
      const urls = this.images.map(item => item.src || item)
      uni.previewImage({
        current: urls[index],
        urls: urls
      })
    }
  }
}
</script>

<style scoped>
.image-swiper-container {
  width: 100%;
  overflow: hidden;
}

.image-scroll-view {
  white-space: nowrap; /* 防止图片换行 */
  width: 100%;
}

.image-wrapper {
  display: inline-block; /* 让图片横向排列 */
}

.scroll-image {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px; /* 图片间距 */
}

.scroll-image:last-child {
  margin-right: 0;
}
</style>